import React, { Component } from 'react'
import { Button, Select, message  } from 'antd'
import 'antd/dist/antd.css'

export default class Count extends Component {
  state = {
    preNumber: 0,
    number: 1,
    
  }
  // 得到选择的数字
  getNumber = (value) => {
    this.setState({number:+value})
  }
  // 加
  add = ()=>{
    const {preNumber,number} = this.state
    this.setState({preNumber: preNumber+number})
  }
  // 减
  sub = ()=>{
    const {preNumber,number} = this.state
    this.setState({preNumber: preNumber-number})
  }
  // 奇数则加
  oddAdd = ()=>{
    const {preNumber,number} = this.state
    if(preNumber%2 === 1 || preNumber%2 === -1){
      this.setState({preNumber: preNumber+number})
    }else{
      message.info('Now不是奇数');
    }
  }
  // 异步加
  asyncAdd = ()=>{
    const {preNumber,number} = this.state
    setTimeout(()=>{
      this.setState({preNumber: preNumber+number})
    },500)
  }

  render() {
    const { Option } = Select
    const {preNumber} = this.state
    return (
      <div>
        <h1>Now: {preNumber}</h1>
        <Select defaultValue="1" style={{ width: 120 }} onChange={this.getNumber}>
          <Option value="1">1</Option>
          <Option value="2">2</Option>
          <Option value="3">3</Option>
        </Select>&nbsp;
        <Button shape="circle" onClick={this.add}>+</Button>&nbsp;
        <Button shape="circle" onClick={this.sub}>-</Button>&nbsp;
        <Button onClick={this.oddAdd}>奇数则加</Button>&nbsp;
        <Button onClick={this.asyncAdd}>异步加</Button>
      </div>
    )
  }
}
